<script setup lang="ts">
import { ref } from "vue";

defineProps({
  msg: String,
});

const inputText = ref("123123");
const clickEvent = (e) => {
  console.log("点击了按钮");
};
const inputEvent = (e) => {
  console.log("input事件", e);
};
const changeEvent = (e) => {
  console.log("change事件", e);
};
const focusEvent = (e) => {
  console.log("focus事件", e);
};
const blurEvent = (e) => {
  console.log("blur事件", e);
};
const clearEvent = () => {
  console.log("clear事件");
};
const visible = ref(false);
const modelCloseEvent = (e) => {
  console.log("监听到了关闭事件", e);
};
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <fl-card>
        <template #header>
          myCustomCard_header 牛逼
        </template>
        <p>这是一个卡片</p>
        <p>这是一个卡片</p>
        <p>这是一个卡片</p>
        <p>这是一个卡片</p>
        <p>这是一个卡片</p>
        <p>这是一个卡片</p>
      </fl-card>
    </div>
    <div class="fl-divide"></div>
    <div style="width: 50%">
      <fl-tag></fl-tag>
      <fl-tag>tag</fl-tag>
      <fl-tag type="success">tag</fl-tag>
      <fl-tag type="info">tag</fl-tag>
      <fl-tag type="warning">tag</fl-tag>
      <fl-tag type="danger">tag</fl-tag>
    </div>
    <hr>
    <div>
      <fl-model
        v-model:model-visible="visible"
        title="属性标题"
        :width="40"
        @close="modelCloseEvent(1)"
        @closed="modelCloseEvent(2)"
      >
        <fl-input placeholder="请输入你想要的内容"></fl-input>
        <template #footer>
          <div style="text-align: right">
            <fl-button type="primary" @click="visible = !visible">确认</fl-button>
            <fl-button @click="visible = !visible">取消</fl-button>
          </div>
        </template>
      </fl-model>
      <fl-button @click="visible = !visible">点我变更model状态</fl-button>
    </div>
    <div>
      <div>
        <form>
          <fl-input
            style="margin-top: 10px"
            v-model="inputText"
            placeholder="请输入车牌号"
          >
            <template #prefix>
              <i class="fa fa-car"></i>
            </template>
          </fl-input>
        </form>
        车牌号: {{ inputText }}
      </div>
      <div>
        <fl-input
          style="margin-top: 10px"
          type="password"
          showPassword
          clearable
          v-model="inputText"
          placeholder="请输入密码"
          prefix-icon="fa fa-lock"
          suffix-icon="fa fa-lock"
        ></fl-input>
      </div>
      <div>
        <fl-input
          clearable
          disabled
          v-model="inputText"
          style="margin-top: 10px"
          placeholder="placeholder"
        >
          <template #prepend> Http:// </template>
        </fl-input>
      </div>
      <div>
        <fl-input style="margin-top: 10px" placeholder="placeholder">
          <template #append> @163.com </template>
        </fl-input>
      </div>
      <div>
        <fl-input style="margin-top: 10px" placeholder="placeholder">
          <template #prepend> Http:// </template>
          <template #append> .com </template>
        </fl-input>
      </div>
      <div>
        <fl-input style="margin-top: 10px" placeholder="placeholder">
          <template #prepend> Http:// </template>
          <template #append>
            <fl-button type="primary">.com</fl-button>
            <fl-button style="flex: 1" type="primary">.com</fl-button>
          </template>
        </fl-input>
      </div>
      <div>
        <fl-input resize type="textarea" placeholder="文本域"></fl-input>
        <fl-input
          resize
          type="textarea"
          v-model="inputText"
          placeholder="文本域"
        ></fl-input>
        <fl-input
          resize
          type="textarea"
          :rows="4"
          v-model="inputText"
          placeholder="文本域"
        ></fl-input>
      </div>
    </div>
    <hr />
    <div>
      <div>
        普通按钮：
        <fl-button @click="clickEvent">default</fl-button>
        <fl-button @click="clickEvent" type="primary">primary</fl-button>
        <fl-button @click="clickEvent" type="success">success</fl-button>
        <fl-button @click="clickEvent" type="warring">warring</fl-button>
        <fl-button @click="clickEvent" type="danger">danger</fl-button>
      </div>
      <div>
        禁用状态：
        <fl-button disabled>default disabled</fl-button>
        <fl-button type="primary" disabled>primary disabled</fl-button>
        <fl-button type="success" disabled>success disabled</fl-button>
        <fl-button type="warring" disabled>warring disabled</fl-button>
        <fl-button type="danger" disabled>danger disabled</fl-button>
      </div>
      <div>
        图标按钮：
        <fl-button @click="clickEvent" icon="fa fa-at">default icon</fl-button>
        <fl-button
          @click="clickEvent"
          icon="fa fa-spinner"
          type="primary"
        ></fl-button>
        <fl-button @click="clickEvent" icon="fa fa-at" type="success"
          >success icon</fl-button
        >
        <fl-button @click="clickEvent" icon="fa fa-at" type="warring"
          >warring icon</fl-button
        >
        <fl-button @click="clickEvent" icon="fa fa-at" type="danger"
          >danger icon</fl-button
        >
      </div>
      <div>
        圆形按钮：
        <fl-button @click="clickEvent" round icon="fa fa-at"
          >default icon</fl-button
        >
        <fl-button
          @click="clickEvent"
          round
          icon="fa fa-spinner"
          type="primary"
        ></fl-button>
        <fl-button
          @click="clickEvent"
          round
          type="success"
          :gap="5"
          icon="fa fa-at"
          >success icon</fl-button
        >
        <fl-button @click="clickEvent" round type="warring" icon="fa fa-at"
          >warring icon</fl-button
        >
        <fl-button @click="clickEvent" round type="danger">danger icon</fl-button>
      </div>
      <div>
        圆角按钮：
        <fl-button @click="clickEvent" circle icon="fa fa-at"></fl-button>
        <fl-button
          @click="clickEvent"
          circle
          icon="fa fa-spinner"
          type="primary"
        ></fl-button>
        <fl-button
          @click="clickEvent"
          circle
          icon="fa fa-print"
          type="success"
        ></fl-button>
        <fl-button
          @click="clickEvent"
          circle
          icon="fa fa-bold"
          type="warring"
        ></fl-button>
        <fl-button
          @click="clickEvent"
          circle
          icon="fa fa-text-width"
          type="danger"
        ></fl-button>
      </div>
      <div>
        大小按钮：
        <fl-button @click="clickEvent" size="large">大按钮</fl-button>
        <fl-button @click="clickEvent">中按钮</fl-button>
        <fl-button @click="clickEvent" size="small">小按钮</fl-button>
        <fl-button
          @click="clickEvent"
          circle
          icon="fa fa-at"
          size="large"
        ></fl-button>
        <fl-button @click="clickEvent" circle icon="fa fa-at"></fl-button>
        <fl-button
          @click="clickEvent"
          circle
          icon="fa fa-at"
          size="small"
        ></fl-button>
      </div>
      <hr />
    </div>
  </div>
</template>

<style scoped></style>
